<template>
  <el-drawer
    :append-to-body="true"
    :wrapperClosable="false"
    :title="title"
    size="840px"
    :visible="open"
    @close="handleClose"
  >
    <div class="drawer_container">
      <div class="sign">注：公式插入后不支持编辑。如需修改，请删除该填空项，点击【添加选项】并输入选项内容。</div>
      <div class="drawer_content">
        <iframe ref="inputIFrameRef" class="iframe" height="560px" width="100%" frameborder="0" src="/kityformula/FormulaDrawer.html"
        ></iframe>
      </div>
      <div class="bottom_btns">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="sureBtn">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'addFormulaOptionDrawer',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: [String],
      default: '插入公式'
    }
  },
  data() {
    return {}
  },
  methods: {
    //关闭抽屉
    handleClose() {
      this.$emit('update:open', false)
    },
    sureBtn() {
      const kfe = this.$refs.inputIFrameRef.contentWindow.kfe
      let latex = kfe.execCommand('get.source')
      latex = latex.replace(/\s/g, '') // 去掉空格

      if (latex === '\\placeholder') {
        this.$modal.msgWarning('请输入公式')
        return
      }
      let str = `<p><span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="${latex}"></span></p>`
      this.$emit('formulaReturn', str)
      this.handleClose()
    }
  }
}
</script>

<style scoped lang="scss">
.drawer_container {
  width: 100%;
  padding: 0 20px 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;

  .drawer_content {
    width: 100%;
    height: calc(100vh - 200px);
    overflow: auto;
  }

  .sign {
    width: 100%;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #ef820a;
    margin-bottom: 20px;

  }

  .bottom_btns {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

}
</style>
